<script>
import { dictMixin } from '@/mixin/dict'

export default {
  name: 'operate-hour',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      response: [],
      peakValleyTypeList: [],
      projectList: [],
      formData: {}
    }
  },
  created() {
    this.$api.commonSelected({
      code: 'HourElectricityPricePeakValleyTypeSelected'
    }).then(response => {
      this.peakValleyTypeList = response.data
    })
    this.$api.commonSelected({
      code: 'SceneProjectSelected'
    }).then(response => {
      this.projectList = response.data
    })
  },
  computed: {
    rules() {
      return {
        sceneProjectId: [{ required: true, message: '请选择项目' }],
        timeRange: [{ required: true, message: '请选择时段' }],
        price: [{ required: true, message: '请输入电价' }],
        peakValleyType: [{ required: true, message: '请选择峰谷类型' }],
        dateRange: [{ required: true, message: '请选择生效时间范围' }]
      }
    }
  },
  watch: {
    popData: {
      handler(data) {
        this.isAdd = !data.id
        this.formData = Object.assign({}, data)
      },
      deep: true,
      immediate: true
    },
    confirm() {
      const params = {
        ...(this.formData || {})
      }
      this.submit(params)
    }
  },
  methods: {
    submit(params) {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          delete params.createTm
          delete params.createBy
          delete params.modifyTm
          params.startTime = params.timeRange[0]
          params.endTime = params.timeRange[1]
          params.startDate = params.dateRange[0]
          params.endDate = params.dateRange[1]
          const res = await this.$api.hourElectricityPrice[this.isAdd ? 'add' : 'update'](params)
          if (Number(res.code) === 1000) {
            this.$message.success(`${this.isAdd ? '新增' : '编辑'}成功！`)
            this.$emit('onFinish', 'operate-hour-add')
          }
        }
      })
    }
  }
}
</script>

<template>
  <div class="operate-hour-box">
    <el-form ref="form" :model="formData" :rules="rules" label-width="150px">
      <el-form-item label="所属项目" prop="sceneProjectId">
        <el-select v-model="formData.sceneProjectId" placeholder="请选择项目" style="width: 100%">
          <el-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时段" prop="timeRange">
        <el-time-picker v-model="formData.timeRange" is-range placeholder="请选择时段"
                        value-format="HH:mm:ss"></el-time-picker>
      </el-form-item>
      <el-form-item label="电价(元/千瓦时）" prop="price">
        <el-input-number v-model="formData.price" placeholder="请输入电价" :min="0" style="width: 100%" />
      </el-form-item>
      <el-form-item label="峰谷类型" prop="peakValleyType">
        <el-select v-model="formData.peakValleyType" placeholder="请选择峰谷类型" style="width: 100%">
          <el-option v-for="item in peakValleyTypeList" :key="item.value" :value="item.value"
                     :label="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生效时间范围" prop="dateRange">
        <el-date-picker v-model="formData.dateRange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                        placeholder="请选择生效时间范围" type="daterange" rangeSeparator="至" />
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

</style>
